<template>
  <!--笔试题-->
  <div class="p-4">
    <BasicTable @register="registerTable">
      <template #tableTitle>
        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate"> 新增</a-button>
      </template>
      <!-- <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'gender'">
          <template v-if="record.gender === 'male'">男</template>
          <template v-else-if="record.gender === 'female'">女</template>
          <template v-else>unknown</template>
        </template>
      </template> -->
      <!--操作栏-->
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" @success="handleSuccess" />
      </template>
    </BasicTable>
    <InterviewModal @register="registerModal" @success="reload" />
    <div class="p-2">
      <a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
        <a-tab-pane key="one" tab="表格一"></a-tab-pane>
        <a-tab-pane key="two" tab="表格二" force-render></a-tab-pane>
      </a-tabs>
    </div>
    <my-table
      :dataSource="dataSource"
      :columns="myColumns"
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
    />
  </div>
</template>

<script lang="ts" name="interview" setup>
  import { ref } from 'vue'
  import { useListPage } from '/@/hooks/system/useListPage';
  import { BasicTable, TableAction } from '/@/components/Table';
  import MyTable from '/@/components/Table2/MyTable.vue';
  import { columns, myCol, myCol2, searchFormSchema } from './interview.data';
  import { useModal } from '/@/components/Modal';
  import InterviewModal from './InterviewModal.vue'
  import { list, deleteIee } from './interview.api'

  const loading = ref(false)
  const activeKey = ref('one')
  const dataSource = ref([])
  let pagination = {}
  const myColumns = ref(myCol)

  getDataSocuse({})

  function handleTabChange(e) {
    console.log(e)
    if (e === 'one') {
      myColumns.value = myCol
      getDataSocuse({})
    }
    if (e === 'two') {
      myColumns.value = myCol2
      getDataSocuse({})
    }
  }

  async function getDataSocuse(params) {
    dataSource.value = await list(params)
  }

  function handleTableChange(pagination, filters, sorter) {
    console.log(pagination, filters, sorter);
  }

  // 列表页面公共参数、方法
  const { tableContext } = useListPage({
    tableProps: {
      title: '被面试者列表',
      api: list,
      columns: columns,
      size: 'small',
      pagination: true,
      isTreeTable: true,
      striped: true,
      useSearchForm: true,
      showTableSetting: true,
      bordered: true,
      showIndexColumn: false,
      tableSetting: { fullScreen: true },
      formConfig: {
        schemas: searchFormSchema,
        autoAdvancedCol: 4,
        baseColProps: { xs: 24, sm: 12, md: 6, lg: 6, xl: 6, xxl: 6 },
        actionColOptions: { xs: 24, sm: 12, md: 6, lg: 6, xl: 6, xxl: 6 },
      },
      actionColumn: {
        width: 220,
      },
    },
  });
  //注册table数据
  const [registerTable, { reload }] = tableContext;

  const [registerModal, { openModal }] = useModal();

  function handleCreate() {
    openModal(true, {
      isUpdate: false
    })
  }
  /**
   * 删除事件
   * @param record 
   */
  async function handleDelete(record) {
    const { deleted } = await deleteIee(record)
    if (deleted) { reload() }
  }
  /**
   * 编辑事件
   * @param record 
   */
  function handleEdit(record) {
    openModal(true, {
      record,
      isUpdate: true
    })
  }

  function handleSuccess() {
    console.log('success')
    reload()
  }

  /**
   * 操作栏
   */
  function getTableAction(record) {
    return [
      {
        label: '编辑',
        onClick: handleEdit.bind(null, record)
      },
      {
        label: '删除',
        popConfirm: {
          title: '是否确认删除',
          confirm: handleDelete.bind(null, record),
        },
      },
    ];
  }

</script>

<style scoped lang="less">
</style>
